---
title: "Tag Group"
description: A collection of tags displayed together, allowing users to categorize, filter, or manage multiple labels efficiently.
order: 4
published: true
references: ["https://react-spectrum.adobe.com/react-aria/TagGroup.html#props"]
---

## Basic
A tag group is a focusable collection of labels, categories, keywords, filters, or other elements, equipped with keyboard navigation, selection, and removal functionalities.
<How toUse="collections/tag-group/tag-group-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/tag-group
```

## Composed components
<Composed components={['field', 'badge']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='tag-group'/>

## Anatomy
```
import { Tag, TagGroup, TagList } from "@/components/ui/tag-group"
import { Label } from "@/components/ui/field"
```

```
<TagGroup selectionMode="multiple">
  <Label>Serverless</Label>
  <TagList>
    <Tag>AWS Lambda</Tag>
    <Tag>Google Cloud Functions</Tag>
    <Tag>Azure Functions</Tag>
  </TagList>
</TagGroup>
```

## With remove button
Tags within the group can include a removal button.
<How toUse="collections/tag-group/tag-group-with-remove-demo" />

## Controlled
Manage the values of the tag group through the `value` prop.
<How toUse="collections/tag-group/tag-group-controlled-demo" />

## Href
Incorporate a hyperlink within the tag group using the `href` prop.
<How toUse="collections/tag-group/tag-group-href-demo" />

## Disabled
Disable tags either by setting the `isDisabled` prop or using `disabledKeys` on the `TagGroup`.
<How toUse="collections/tag-group/tag-group-disabled-demo" />
